在上篇文章中，我們學習了 QWeb 的基本概念，並構建了一個簡單的模板。在這篇文章中，我們將進一步擴展這個模板，並探討如何在 Odoo 中使用多個模板和整合外部資源，如 CSS 和 JavaScript 文件。我們將通過一個更完整的範例，展示如何利用 QWeb 來創建一個更為複雜的前端界面。

在這一篇中，我們將專注於創建網站的 header 部分，並且使用 Odoo 的 QWeb 模板來展示這個 header。

資料夾結構

首先，我們創建一個簡單的資料夾結構，並專注於 header。我們會在後面逐步增加其他部分。

my_theme/
  ├── controllers/              # 控制器
  │   └── main.py               # 處理路由的控制器文件
  ├── __manifest__.py           # 模組的描述文件
  ├── __init__.py               # 初始化文件
  ├── static/                   # 靜態資源（CSS、JS、圖片等）
  │   ├── src/
  │   │   ├── scss/
  │   │   │   └── custom_styles.scss  # 自定義樣式文件
  │   │   └── img/
  │   │       └── logo.png      # 靜態圖片
  └── views/                    # 網站模板
      └── header.xml            # 頁面頭部模板

1. 定義 __manifest__.py

這是 Odoo 模組的描述文件，我們會在這裡定義模組依賴和需要加載的資源。在這個階段，我們只專注於加載 header。

{
    'name': 'My Theme with Header',
    'description': 'A custom website theme with only a header.',
    'version': '1.0',
    'category': 'Theme/Website',
    'depends': ['website'],  # 依賴網站模組
    'data': [
        'views/header.xml',  # 加載頁面頭部
    ],
    'assets': {
        'web.assets_frontend': [
            'my_theme/static/src/scss/custom_styles.scss',  # 加載自定義樣式
        ],
    },
}

2. 創建控制器 main.py

控制器會處理路由並渲染網頁的 header，這裡我們先展示一個簡單的首頁，主要是顯示 header。

from odoo import http

class MyThemeController(http.Controller):

    @http.route('/', type='http', auth='public', website=True)
    def home(self, **kwargs):
        return http.request.render('my_theme.header')

• @http.route('/')：當訪問網站根目錄（/）時，渲染 my_theme.header 模板。

3. 定義 header.xml

這是網站的 header 部分，通常會包括網站的導航欄、logo 等。在這一篇中，我們只關注 header。

<odoo>
    <template id="header">
        <header>
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <div class="container-fluid">
                    <a class="navbar-brand" href="/">
                        <img src="/my_theme/static/src/img/logo.png" alt="Logo" width="30" height="30">
                        My Website
                    </a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarNav">
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link" href="/">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/about">About</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/contact">Contact</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </header>
    </template>
</odoo>

4. 靜態資源

這是我們自定義的 CSS 文件，可以在其中定義一些樣式來調整 header 的外觀。

static/src/scss/custom_styles.scss

.navbar {
    background-color: #3498db;
    .navbar-brand {
        color: white;
        &:hover {
            color: lightgray;
        }
    }
    .nav-link {
        color: white;
        &:hover {
            color: lightgray;
        }
    }
}

5. 初始化文件

最後，在 __init__.py 文件中引入控制器，這樣 Odoo 能夠加載控制器。

from . import controllers

第一篇總結

• 資料夾結構：我們已經創建了基本的資料夾結構，包含 header。
• 控制器：我們創建了一個簡單的控制器來處理首頁路由，並渲染 header 模板。
• 模板：我們定義了一個簡單的 header，包含導航欄和 logo。
• 樣式：我們創建了自定義樣式來修改 header 的外觀。

參考

Github